<template>
  <div id="table_container">
    <div class="body-contain">
      <el-row style="height: 200px">
        <el-col :span="8">
          <div class="action-box">
            <p>档案筛查</p>
            <el-button v-permission="['report:add']" @click="onAddReport" type="primary">新增报告</el-button>
            <el-button v-permission="['patient:add']" @click="handleCreate" type="primary">新增学生</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" style="margin-right: 10px;">
            <div style="display:flex; justify-content: center;align-items: center;height: 180px">
              <div style="flex: 1">
                <div style="font-size: 40px; margin-bottom: 20px;font-weight: bold;">
                  <CountTo :endVal='initData.yesterdayTotal'/>
                </div>
                <div style="font-size: 24px;font-weight: 520;margin-bottom: 5px">昨日新增报告数</div>
                <div><i class="el-icon-top" style="color: #20a0ff;"></i>较昨日上涨<span style="color: #20a0ff;">0%</span></div>
              </div>
              <div style="flex: 1;">
                <i class="el-icon-view" style="color: #20a0ff;font-size:50px;"></i>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div id="pie" style="height: 180px"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日新增报告</span>
          </div>
          <el-table
              :data="tableData"
              v-loading="loading"
              row-key="id"
              border>
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                prop="number"
                label="档案编号">
            </el-table-column>
            <el-table-column
                prop="patient_name"
                label="患者">
            </el-table-column>
            <el-table-column
                prop="report_type_label"
                label="筛查类别">
              <template slot-scope="scope">
                <el-tag
                    :type="scope.row.report_type === 0 ? 'success' :scope.row.report_type === 1 ? 'primary' :'warning' "
                    disable-transitions>{{ scope.row.report_type_label }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="school_name"
                label="学校">
            </el-table-column>
            <el-table-column
                prop="hospital_name"
                label="医院">
            </el-table-column>
            <el-table-column
                label="创建时间"
                align="center"
                width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                width="260"
                align="center"
                label="操作">
              <template slot-scope="scope">
                <el-button @click="handleDetail(scope.row)" title="查看详情" type="primary" icon="el-icon-search" size="small">详情</el-button>
                <el-button @click="handlePrint(scope.row)" title="打印" type="success" icon="el-icon-printer" size="small">打印</el-button>
                <el-button @click="handleDelete(scope.row)" title="删除" type="danger" icon="el-icon-delete" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>
    </div>

    <el-dialog title="新建患者" width="400px" @close="handleClose" :visible.sync="createDialogFormVisible">
      <el-form :model="formData" style="text-align: left" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
          <el-input v-model="formData.id_card"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model.number="formData.phone"></el-input>
        </el-form-item>

        <el-form-item label="生日">
          <el-date-picker
              style="width: 100%"
              v-model="formData.birth"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="父母姓名">
          <el-input v-model="formData.parent_name"></el-input>
        </el-form-item>
        <el-form-item label="父母电话">
          <el-input v-model.number="formData.parent_phone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCreatePatient">确 定</el-button>
      </div>
    </el-dialog>
    <print
        v-if="dialogVisible"
        :report-id="reportId"
        :visible.sync="dialogVisible"
        @updateVisible="updateVisible">
    </print>
  </div>

</template>

<script>
import {createPatient, deleteReport, getHome, getReport, getReportMangeData} from "@/api";
import CountTo from 'vue-count-to'
import print from "@/components/Print";

export default {
  name: "index",
  components: {
    CountTo,
    print,
  },
  data() {
    return {
      tableData: [],
      loading: true,
      keyWord: undefined,

      // 分页器相关
      page: 1,
      pageTotal: 0,
      pageSize: 10,

      createDialogFormVisible: false,
      formData: {
        name: undefined,
        id_card: undefined,
        gender: 0,
        birth: undefined,
        phone: undefined,
        parent_name: undefined,
        parent_phone: undefined,
        status: true
      },
      // 表单校验
      rules: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        id_card: [
          {required: true, message: '身份证号不能为空', trigger: 'blur'},
          {validator: this.validID, trigger: 'blur'}
        ]
      },

      dialogVisible: false,
      reportId: undefined,

      initData: {
        "yesterdayTotal": 0,
        "reportTypeCount": [
          {
            "name": "初筛",
            "value": 0
          },
          {
            "name": "复测",
            "value": 0
          }
        ]
      },
    }
  },
  async mounted() {
    this.initData = await this.getInitData()
    if (this.initData.reportTypeCount.length === 0) {
      console.log(this.initData)
      this.initData.reportTypeCount = [
        {
          "name": "初筛",
          "value": 0
        },
        {
          "name": "复测",
          "value": 0
        }
      ]

    }
    this.drawiPie()
    this.getDataList()
  },
  methods: {
    getInitData() {
      return new Promise((async (resolve) => {
        let res = await getReportMangeData();
        resolve(res.data)
      }))
    },

    getDataList(params = {}) {
      this.loading = true

      params['page'] = this.page
      params['pageSize'] = this.pageSize
      params['keyWord'] = this.keyWord
      params['isNew'] = true
      getReport(params).then(res => {
        this.tableData = res.data.results;
        this.pageTotal = res.data.count;
        setTimeout(() => {
          this.loading = false
        }, 1.5 * 500)
      })
    },
    handleFilter() {
      this.getDataList()
    },
    handleClose() {
      this.form = {
        name: undefined,
        id_card: undefined,
        gender: 0,
        birth: undefined,
        phone: undefined,
        parent_name: undefined,
        parent_phone: undefined,
        status: true
      }
    },
    handleCreate() {
      this.createDialogFormVisible = true
    },
    submitCreatePatient() {
      let data = this.formData
      createPatient(data).then(res => {
        this.$message.success('新建成功！')
        this.createDialogFormVisible = false
        this.$router.go(0)
      })
    },
    // 身份证验证
    async validID(rule, value, callback) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(value)) {
        await this.go(value.length);
        callback()
      } else {
        callback(new Error('身份证号码不正确'))
      }
    },
    // 实现自动生成生日，性别，年龄
    go(val) {
      let iden = this.formData.id_card;
      let sex = null;
      let birth = null;
      let myDate = new Date();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      let age = 0;

      if (val === 18) {
        age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        sex = iden.substring(16, 17);
        birth = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
        if (iden.substring(10, 12) < month || iden.substring(10, 12) === month && iden.substring(12, 14) <= day) age++;

      }
      if (val === 15) {
        age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
        sex = iden.substring(13, 14);
        birth = "19" + iden.substring(6, 8) + "-" + iden.substring(8, 10) + "-" + iden.substring(10, 12);
        if (iden.substring(8, 10) < month || iden.substring(8, 10) === month && iden.substring(10, 12) <= day) age++;
      }

      if (sex % 2 === 0)
        sex = 2;
      else
        sex = 1;
      //性别  ==> 1:男       2:女
      this.formData.age = age;
      this.formData.gender = sex;
      this.formData.birth = birth;
    },

    onAddReport() {
      this.$router.push({name: 'createReport'})
    },
    handleDetail(row) {
      this.$router.push({name: 'reportDetail', params: {id: row.id}})
    },
    handlePrint(row) {
      this.reportId = row.id
      this.dialogVisible = true
    },
    // 修改是否让页面显示与隐藏的事件
    updateVisible(val) {
      this.dialogVisible = val
    },
    handleDelete(row) {
      deleteReport(row.id).then(res => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    drawiPie() {
      let myopiaData = this.initData.reportTypeCount
      let chart = this.$echarts.init(document.getElementById('pie'),)
      chart.setOption({
        title: {
          text: '昨日复查占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: myopiaData,

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
  }

}

</script>

<style scoped>
.body-contain {
  background-color: white;
  padding: 10px;
  height: calc(100vh - 70px);
}

.action-box {
  /*height: 126px;*/
  text-align: center;
  line-height: 80px;
  vertical-align: center;
  font-size: 30px;
}

/*.box-card {*/
/*  height: 200px;*/
/*}*/
</style>
<style scoped>

.p3 {
  padding: 2rem;
}

.flex {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.items-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.mt1 {
  margin-top: .5rem;
}

.mr1 {
  margin-right: .5rem;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.justify-between {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.pb1 {
  padding-bottom: .5rem;
}

.mt2 {
  margin-top: 1rem;
}

.p1 {
  padding: .5rem;
}

.border {
  border-style: solid;
  border-width: 1px;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.borderRight {
  border-right: 1px solid #000;
}

.borderBottom {
  border-bottom: 1px solid #000;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ml1, .mx1 {
  margin-left: .5rem;
}
</style>